<!--

旧版登录页面
（废弃）

-->
<template>
  <div class="login_container">
        <div class="login_box">
          <!--logo-->
          <div class="login-logo">
            <img src="../assets/img.jpg" alt="">
          </div>
          <!-- 表单-->
          <el-form :model="loginForm" :rules="rules" class="login_from" ref="loginForm">
            <el-form-item prop="workName">
              <el-input prefix-icon="el-icon-s-custom" v-model="loginForm.workName" autofocus></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="el-icon-key" v-model="loginForm.password" type="password"
                        @keyup.enter.native="login"></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="success" @click="register" size="small" round>注册</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
              <el-button type="danger" @click="reset('loginForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

    <!-- 注册-->
    <el-dialog title="用户注册" :visible.sync="dialogVisible" width="40%">
      <!--表单-->
      <el-card>
        <el-form :model="addUserForm" :inline="true" :rules="addrules" size="mini" ref="addUserForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户账号" prop="workName">
            <el-input v-model="addUserForm.workName"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input v-model="addUserForm.password"></el-input>
          </el-form-item>
          <el-form-item label="用户性别" prop="workSex">
            <el-select v-model="addUserForm.workSex" placeholder="请选择用户性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户身份证" prop="workIdCard">
            <el-input v-model="addUserForm.workIdCard"></el-input>
          </el-form-item>
          <el-form-item label="用户电话" prop="workTel">
            <el-input v-model="addUserForm.workTel"></el-input>
          </el-form-item>
          <div class="btn_opt">
            <el-form-item>
              <el-button type="primary" @click="submitAddForm('addUserForm')">立即创建</el-button>
              <el-button @click="resetForm('addUserForm')">重置</el-button>
              <el-button @click="returnLogin()">返回</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </el-dialog>

  </div>
</template>
<script>
export default {
    name:'Login',
    data(){
        var validateWorkName=(rule,value,callback)=>{
            if(value===''){
                callback(new Error('请输入用户名'));
            }
            else{
                if(value.length <2||value.length>10){
                    callback(new Error('用户名长度是2~10位'));
                }
                callback();
            }
        };
        var validatePass=(rule,value,callback)=>{
            if(value===''){
                callback(new Error('请输入密码'));
            }
            else{
                if(value.length <3||value.length>10){
                    callback(new Error('密码长度是3~10位'));
                }
                callback();
            }
        };
        return{
            dialogVisible:false,
            addUserForm:{},
            loginForm:{
                workName:'',
                password:''
            },
            rules:{
                workName:[
                    {validator:validateWorkName,trigger:'blur'}
                ],
                password:[
                    {validator:validatePass,trigger:'blur'}
                ]
            },
            addrules:{
            workName: [
              { required: true, message: '请输入用户账号', trigger: 'blur' },
              { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'change' }
            ],
            workSex: [
              { required: true, message: '请选择性别', trigger: 'change' }
            ],
            workIdCard: [
              { required: true, message: '请输入用户身份证号', trigger: 'blur' },
              { min: 18, max: 18, message: '长度为 18 个字符', trigger: 'blur' }
            ],
            workTel: [
              { required: true, message: '请输入电话号码', trigger: 'blur' },
              { min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }
            ],
          },
        }
    },
    methods:{
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.$axios.post('/user-info/login','workName='+this.loginForm.workName+"&password="+this.loginForm.password).then(res=>{
                        console.log(res)
                        if(res.data.code == 200){
                          debugger
                            this.$message.success('登陆成功')
                            this.$store.state.user = res.data.data
                             sessionStorage.setItem('user',JSON.stringify(res.data))
                            this.$router.push("/Home")

                        }else{
                            this.$message.error(res.data.msg)
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }else{
                    return false;
                }
            });
        } ,
      register(){
        this.dialogVisible = true
      },
      reset(formName){
          this.$refs[formName].resetFields();
      },
      returnLogin(){
        this.dialogVisible = false
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      submitAddForm(formName) {
        this.$refs[formName].validate((valid)=>{
          if(valid){
            this.$axios.post("/user-info/addNewUser",this.addUserForm).then(res=>{
              console.log(res)
              if (res.data.code ==200){
                this.$message.success("注册成功")
                console.log(res)

              } else {
                this.$message.error(res.data.msg)
              }
            }).catch(err=>{
              console.log(err)
            })

          }else{
            return false;
          }
        });
      },
    },
}

</script>
<style scoped>
.login_container {
  background-image: url("../assets/bg.png");
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login-logo {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eeeeee;
}
.btns {
  display: flex;
  justify-content: flex-end;
}

.login_from {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
